<template>
	<view class="message">
		<view class="cityList">
			<uv-index-list :scrollTop="scrollTop" @select="selector" :indexList="indexList" active-color="#31C6A6">
				<template v-slot:header>
                    <view class="box" v-if="localCity && localCity.name">
                        <view class="title">当前城市</view>
                        <view class="city">
                            <view class="item add" style="background-color: #f5f5f5;" @click="change({})">
                                <text class="u-line-1" style="margin-right:12rpx">{{ localCity.name }}</text>
                                <uv-icon name="close" color="#999" size="17"></uv-icon>
                            </view>
                        </view>
                    </view>
                    <view class="box">
                        <view class="title">热门城市</view>
                        <view class="city">
                            <view class="item u-line-1" @click="change(item)" v-for="(item , index) in defaultCityList" :key="index">{{ item.name }}</view>
                        </view>
                    </view>
                </template>
                
                <template v-for="(item, index) in list" :key="index">
                    <uv-index-anchor :text="item.letter"/>
                    <uv-index-item>
                        <view class="list-cell u-border-bottom" v-for="(item1, index) in item.data" @click="change(item1)" :key="index">
                            {{item1.name}}
                        </view>
                    </uv-index-item>
                </template>
			</uv-index-list>
		</view>
	</view>
</template>
<script>
    import { citys } from "@/api/baseData";
    export default {
        components: {},
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },
        data() {
            return {
                scrollTop: 0,
                indexList: [],
                list: [],
                defaultCityList:[],
                localCity:''
            }
        },
        created(){
            this.localCity = uni.getStorageSync('city')
            const recordCitys = {}
            const letterMap = {}
            const defaultCity = ['北京','上海','广州','深圳','杭州','重庆']
            citys({}).then(res => {
                res.data.forEach(item => {
                    const letter = item.pinyin.charAt(0).toUpperCase()
                    letterMap[letter] = letter
                    item.letter = letter
                    if(!recordCitys[letter])recordCitys[letter] = []
                    recordCitys[letter].push(item)
                    if(defaultCity.includes(item.name)){
                        this.defaultCityList.push(item)
                    }
                })
                this.indexList = Object.keys(letterMap)
                const list = []
                this.indexList.forEach(item => {
                    list.push({
                        letter:item,
                        data:recordCitys[item]
                    })
                })
                this.list = list
            })
        },
        methods:{
            change(item){
                uni.setStorageSync('city',item)
                uni.setStorageSync('county',{})
                this.$emit('change',item)
            },
            selector(e) {
                //从当前位置到达目标位置
                // uni.createSelectorQuery().select('#' + e).boundingClientRect((data) => {
                //     uni.createSelectorQuery().select('.cityList').boundingClientRect((res) => {
                //         //最外层盒子的节点：类或者id
                //         this.$nextTick(function () {
                //             uni.pageScrollTo({
                //                 scrollTop: data.top - res.top,
                //                 duration: 0 //app端这个必须设置成0
                //             })
                //     })
                // }).exec()}).exec()
            }
        }
    }
</script>
<style>
    .message .uv-index-list__letter{
        top:144upx !important;
    }
    .cityList scroll-view{
        max-height: 72vh !important;
    }
</style>
<style scoped lang="scss">
	.message {
		.cityList {
			.box {
				margin: 40rpx 0 30rpx 30rpx;

				.title {
					font-size: 26rpx;
					color: #A6ABB7;
				}

				.city {
					display: flex;
					flex-wrap: wrap;

					.item {
						margin-top: 24rpx;
						margin-right: 2%;
						text-align: center;
						width: 27%;
						height: 80rpx;
						line-height: 80rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						border: 1rpx solid #E5E5E5;
						font-size: 30rpx;
						padding: 0 10rpx;
					}

					.add {
						display: flex;
						align-items: center;
						justify-content: center;

						uni-image {
							margin-right: 8rpx;
							width: 28rpx;
							height: 28rpx;
						}

						uni-text {
							max-width: 145rpx;
						}
					}
				}
			}

			.list-cell {
				display: flex;
				box-sizing: border-box;
				width: 100%;
				padding: 10px 24rpx;
				overflow: hidden;
				color: #323233;
				font-size: 14px;
				line-height: 24px;
				background-color: #fff;
			}

			.anchor-text {
				color: red;
			}
		}
	}
</style>